import DefaultSettings from "@/config/settings";
import DefaultThemes, { ThemeColorKeys } from "@/config/themes";
import colorTools from "@/utils/color";
import { defineStore } from "pinia";
import { useUserStore } from "./user";

const SaveExcludeKeys = ["title", "DEV", "PROD"];

export type SettingsConfig = {
    /**
     * 项目名称
     */
    title: string;
    /**
     * 开发模式
     */
    DEV: boolean;
    /**
     * 生产模式
     */
    PROD: boolean;
    /**
     * 默认主题色
     */
    themeColor: string;
    /**
     * 是否固定Header
     */
    fixedHeader: boolean;
    /**
     * 是否固定侧边栏
     */
    fixedSide: boolean;
    /**
     * 是否收起菜单
     */
    collapsed: boolean;
    /**
     * 是否显示菜单栏
     */
    menu: boolean;
    /**
     * 是否显示顶栏
     */
    header: boolean;
    /**
     * 是否显示面包屑导航
     */
    breadcrumb: boolean;
    /**
     * 是否显示标签栏
     */
    tagsView: boolean;
    /**
     * 是否显示公共底部
     */
    footer: boolean;
    /**
     * 是否缓存组件
     */
    keepAlive: boolean;
    /**
     * 是否开启权限控制
     */
    auth: boolean;
};

const SETTINGS_KEYS = "caih-admin-settings";

const saveSettigns = (settings: SettingsConfig) => {
    const _settings = Object.keys(settings).reduce((_, key) => {
        if (!SaveExcludeKeys.includes(key)) {
            _[key] = settings[key as keyof SettingsConfig];
        }
        return _;
    }, {} as any);
    localStorage.setItem(SETTINGS_KEYS, JSON.stringify(_settings));
};

const setThemes = (themeColor: string) => {
    document.documentElement.style.setProperty("--el-color-primary", themeColor);

    const presetTheme = DefaultThemes.find((item) => item.primary === themeColor);
    let type: keyof typeof ThemeColorKeys;
    for (type in ThemeColorKeys) {
        ThemeColorKeys[type].forEach((key, index) => {
            let color;
            if (presetTheme) {
                color = presetTheme[type][index];
            } else {
                color = colorTools[type](themeColor, key / 10);
            }
            document.documentElement.style.setProperty(`--el-color-primary-${type}-${key}`, color);
        });
    }
};

export const useSettingsStore = defineStore("settings", {
    state: (): SettingsConfig => {
        let settings = {
            ...DefaultSettings,
            title: import.meta.env.VITE_APP_TITLE,
            DEV: import.meta.env.DEV,
            PROD: import.meta.env.PROD,
        } as SettingsConfig;

        try {
            settings = { ...settings, ...JSON.parse(localStorage.getItem(SETTINGS_KEYS)!) };
        } catch (error) {
            console.log("store[settings] init error.");
        }

        if (import.meta.env.MODE === "demo") {
            settings.auth = false;
        }

        setThemes(settings.themeColor);

        return settings;
    },
    actions: {
        switchSettings(key: keyof SettingsConfig, value: any) {
            this.$patch({ [key]: value });
            saveSettigns(this.$state);
            switch (key) {
                case "themeColor":
                    setThemes(value);
                    break;
                case "auth":
                    {
                        const user = useUserStore();
                        user.logout();
                    }
                    break;
            }
        },
        reset() {
            this.$patch(DefaultSettings);
            setThemes(DefaultSettings.themeColor);
            localStorage.removeItem(SETTINGS_KEYS);
        },
    },
});
